<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

  <title>Introduction | Mother Theresa Home</title>

  <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
  <meta name="author" content="fullahead.org" />
  <meta name="keywords" content="XHTML, CSS, template, FullAhead" />
  <meta name="description" content="A valid, XHTML 1.0 template" />
  <meta name="robots" content="index, follow, noarchive" />
  <meta name="googlebot" content="noarchive" />

  <link rel="stylesheet" type="text/css" href="/mth/style/html.css" media="screen, projection, tv " />
  <link rel="stylesheet" type="text/css" href="/mth/style/layout.css" media="screen, projection, tv" />
  <link rel="stylesheet" type="text/css" href="/mth/style/print.css" media="print" />

  <!-- Conditional comment to apply opacity fix for IE #content background.
       Invalid CSS, but can be removed without harming design -->
  <!--[if gt IE 5]>
  <link rel="stylesheet" type="text/css" href="css/ie.css" media="screen, projection, tv " />
  <![endif]-->
</head>


<body>


<!-- #wrapper: centers the content and sets the width -->
<div id="wrapper">

  <!-- #content: applies the white, dropshadow background -->
  <div id="content">

    <!-- #header: holds site title and subtitle -->
    <div id="header">
      <h1><span class="big darkBrown">M</span>other 
      <span class="big darkBrown">T</span>heresa
      <span class="big darkBrown">H</span>ome for Children</h1>
      <h3><span class="highlight">God loves everyone</span></h3>
    </div>



    <!-- #menu: topbar menu of the site.  Use the helper classes .two, .three, .four and .five to set
                the widths for 2, 3, 4 and 5 item menus. -->
    <ul id="menu" class="five">
      <li><a href="/mth/pages/index.html" title="Index" class="here"><span class="big">M</span>ain</a></li>
      <li><a href="/mth/pages/history.html" title="History"><span class="big">H</span>istory</a></li>
      <li><a href="/mth/pages/details.html" title="Details"><span class="big">D</span>etails</a></li>
      <li><a href="/mth/pages/styles.html" title="Styles"><span class="big">S</span>tyles</a></li>
    </ul>

    <!-- #page: holds all page content, as well as footer -->
    <div id="page">

      <h1>Introduction</h1>

      <p>
        <a href="http://fullahead.org/work/alice/" title="Visit Alice's Cabin"><img src="/mth/images/photos/RamiReddyAndHisWife.jpg" alt="Rami Reddy And Family" class="floatLeft"/></a>
        A simple, XHTML 1.0 tableless template without a default sidebar.  You can add one if you want using the custom CSS <a href="coding.html" title="Read about using them">width classes</a>, but sometimes, all you really need is one column.
      </p>

      <p>
        The template displays properly in all the usual browsers, with an added filter hack to get .png opacity working in IE.  If you look in the html source near the top, you'll see a <acronym title="A way to control how IE reads code">conditional comment</acronym> that loads a style sheet for IE 5.0 and up.  You can get rid of this, and everything will still work, except you'll loose the purty content dropshadow.
      </p>

      <ul>
        <li><b>Gecko</b> <i>deeee</i>licious</li>
        <li><b>Opera</b> like hotdogs</li>
        <li><b>Safari</b> wouldn't say no to 2nds</li>
        <li><b>Internet Explorer</b> it tastes like burning...</li>
      </ul>

      <p>
        <a href="http://fullahead.org/work/alice/" title="Visit Alice's Cabin"><img src="/mth/images/photos/tn_inside.jpg" alt="Inside Alice's Cabin" class="floatRight"/></a>
        Total image size of this template comes in just under the new 60kb limit of <acronym title="Open Web Design">OWD</acronym>, so enjoy.  It's nice to have a little more wiggle room with the templates.  Maybe next we could work on getting Javascript?
      </p>

      <p>
        This design started out as the promo site for a friend's cottage.  If you're curious about the original, check out <a href="http://fullahead.org/work/alice/" title="Visit Alice's Cabin">Alice's Cabin</a>.
      </p>


      <!-- .footer: the site footer text, links and whatever else -->
      <p class="footer">
      	Mother Theresa Home For Young Children
      </p>

    </div>

  </div>

</div>

</body>
</html>